<template>
    <el-dialog title="采购单" :visible.sync="dialogFormVisible" width="70%" :append-to-body="true"
    @close="dialogClose">
      <el-form :inline="true" status-icon>
          <el-row>
            <el-form-item label="采购单号">
                <el-input v-model="purchaseOrderInfo.fpmid" placeholder="采购单号" value-key="frmid" />
          </el-form-item>
          <el-form-item label="采购员">
            <el-select v-model="purchaseOrderInfo.feid"  placeholder="请选择">
                <el-option v-for="item in empList" :key="item.feid" :label="item.fename" :value="item.feid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="供应商">
              <el-select v-model="purchaseOrderInfo.fpid" placeholder="请选择">
                <el-option v-for="item in provList" :key="item.fpid" :label="item.fpname" :value="item.fpid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-select v-model="purchaseOrderInfo.fwhid"  placeholder="请选择">
                <el-option
                  v-for="item in warehouseList"
                  :key="item.fwhid"
                  :label="item.fwhname"
                  :value="item.fwhid">
                </el-option>
              </el-select>
        </el-form-item>
          <el-form-item label="采购日期">
            <el-date-picker v-model="purchaseOrderInfo.fpmdate"type="date" :default-time="fpmdate" value-format="yyyy-MM-dd" placeholder="选择日期" />
          </el-form-item>
          </el-row>
      </el-form>
      <el-form>
        <el-form-item label="备注" >
            <el-input v-model="purchaseOrderInfo.fpmmemo"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
        </el-form-item>
      </el-form>
      <!-- 按钮部分 -->
      <el-form>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">审批</el-button>
            <el-button @click="closeForm">关闭</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 -->
      <el-table :data="purchaseOrderInfo.purchaseChildOrderVoList" style="width: 100%">
        <el-table-column prop="fpmid" label="采购单号" width="100" sortable />
        <el-table-column prop="fmid" label="物资编号" width="100" sortable />
        <el-table-column prop="fmname" label="物资名称" width="100" sortable />
        <el-table-column prop="fpcunitprice" label="单价" width="100" sortable />
        <el-table-column prop="fpcquantity" label="采购数量" width="200" sortable />
        <el-table-column prop="fpcmemo" label="备注" width="200" sortable />
    </el-table>

    <el-dialog title="审批提示" :visible.sync="confirmVisible" width="15%" :append-to-body="true" close-on-click-modal close-on-press-escape model="false">
        <el-form>
            <el-form-item label="审批结果">
                <el-select v-model="auditOrderVo.auditStatus"  placeholder="请选择">
                    <el-option
                      v-for="item in statusList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmSubmit()">审批</el-button>
                <el-button @click="confirmClose">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { getEmpList } from '@/api/emp'
import { getWarehouseList } from '@/api/warehouse'
import { getProvList } from '@/api/prov'
import { auditPurchaseOrder } from '@/api/purchaseOrder'

export default {
    computed: {
    ...mapGetters([
      'name',
      'id'
    ])
    },
    props: {
        dialogFormVisible: Boolean,
        editPurchaseOrder: {
            type: Object,
            default: {}
        },
        updateOrCreate: Boolean
    },
    data() {
        return {
            empList: {},
            warehouseList: {},
            provList: {},
            confirmVisible: false,
            searchObj:{},
            auditOrderVo: {},
            purchaseOrderInfo: {
                purchaseChildOrderVoList: [
                {
                    fmname: null,
                    fmid: null,
                    fpmid: null,
                    fpcdate: null,
                    fpcquantity: 1,
                    fpcstatus: "0",
                    fpcmemo: null,
                    fpcunitprice: null,
                    fredate: null
                }
                ],
                fwhname: null,
                fwhid: null,
                fename: null,
                fauditname: null,
                feid: null,
                fauditid: null,
                fpmid: null,
                fpmdate: null,
                fpid: null,
                fpname: null,
                fpmstatus: "0",
                fpmmemo: null
            },
            statusList: [
                {id: "1",name: "审批通过"},
                {id: "2",name: "审批驳回"}
            ]
        }
    },
    created () {
        this.vueInit()
        this.purchaseOrderInfo = this.editPurchaseOrder
    },
    updated () {
       
    },
    methods: {
         // 事件格式化 利用momeent 模块 npm install moment
         dateFormat: function(row,column) {
            var date = row[column.property]
            if (date == undefined) {
                return ""
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        vueInit() {
            getEmpList().then(response => {
                this.empList = response.data.empList
            })
            getWarehouseList({}).then(response => {
                this.warehouseList = response.data.warehouseList
            })
            getProvList({}).then(response => {
                this.provList = response.data.provList
            })
        },
        closeForm(){
            this.dialogFormVisible = false
        },
        confirmSubmit(){
            this.auditOrderVo.auditId = this.id
            this.auditOrderVo.orderId = this.purchaseOrderInfo.fpmid
            auditPurchaseOrder(this.auditOrderVo).then(response => {
                this.$parent.fetchData()
                this.$message({
                    type: 'success',
                    message: '审批成功'
                })
                this.confirmVisible = false
                this.dialogFormVisible = false
            })
        },

        submitForm(purchaseOrderInfo) {
           this.confirmVisible = true
        },
        // 解决父页面按钮只能点击一次问题
        dialogClose() {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.updateOrCreate = false
            this.$parent.vueReset()
        }
    
    }
}
</script>